<template>
  <el-row :gutter="40">
    <el-col v-for="item in recombItems" :span="props.span">
      <MerakControl
        v-bind="item"
        v-model="modelValue[item.field]"
        :ref="el => (recombRefs[item.field] = el as MerakControlInstance)"
        :default-selected-label="modelValue[`${item.field}_txt`]"
        :query-options="recombQueryOptions"
        @change="recombChange"
      >
        <template v-for="prefix in Object.keys(recombPrefix)" #[prefix]>
          {{ recombPrefix[prefix] }}{{ prefix.includes("sku") ? "_" : "-" }}
        </template>
        <template #num_in_packing>
          <el-input class="qf_input" v-model="modelValue[item.field]" v-num />
        </template>
      </MerakControl>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import useProductForm from "@/hooks/useProductForm";

import { ElRow, ElCol, ElInput } from "element-plus";

import MerakControl, { MerakControlInstance, MerakControlProps, MerakControlOption } from "@/components/MerakControl";

const props = defineProps<{
  id: string | number;
  span: number;
  items: MerakControlProps[];
  editor: boolean;
  suite: 0 | 1;
}>();

const modelValue = defineModel<Record<string, any>>({ default: {} });

const { recombRefs, recombPrefix, recombItems, recombQueryOptions, recombChange, recombReduction } = useProductForm({
  typeId: () => props.id,
  suite: () => props.suite,
  formItems: () => props.items,
  formData: modelValue,
  editor: () => true
});

defineExpose({
  recombReduction,
  closePanel: () => {
    Object.values(recombRefs).forEach(ref => ref.closePopover());
  }
});
</script>

<style scoped lang="scss"></style>
